import React from "react";
import styles from '@/assets/css/index.module.css';
import Tabbar from "@/components/Tabbar";
import type room from "@/types/room";
import type coupon from "@/types/coupon";
import { sleep } from "antd-mobile/es/utils/sleep";

export default function Index()
{
    const [search,SetSearch] = useState<string>('');
    const [HasMore,SetHasMore] = useState<boolean>(true);
    const [list,SetList] = useState<room[]>([]);
    const [page,SetPage] = useState<number>(1);
    const [CouponList,SetCouponList] = useState<coupon[]>([]);

    const OnRefresh = async () => 
    {
        await sleep(1500);
        SetList([]);
        SetPage(1);
        SetHasMore(true);
    }

    const OnLoadMore = async () => 
    {
        await sleep(1500);
        await GetRoomData();
    }

    const GetRoomData = async () =>
    {
        const params = {
            search,
            page
        }

        const result = await React.http.post('/room/index',params);

        if(result.code === 1)
        {
            const DataCount = result.data.count;
            let ListCount = 0;

            SetList(v =>
            {
                const data = [...v,...result.data.list];

                ListCount = data.length;

                return data;
            });

            if(ListCount >= DataCount)
            {
                SetHasMore(false);

                return false;
            }

            SetPage(num => num += 1);
        }else{
            SetHasMore(false);

            React.fail(result.msg);
        }
    }

    const OnSearch = async (value:string) =>
    {
        SetSearch(value);

        await OnRefresh();
    }

    const GetCouponData = async () =>
    {
        const result = await React.http.post('/index/index');

        if(result.code === 1)
        {
            SetCouponList(result.data);
        }
    }

    useEffect(() =>
    {
        GetCouponData();
    },[]);

    const CouponData = useMemo(() =>
    {
        return CouponList;
    },[CouponList]);

    return (
        <>
            <div className={styles.heaerd}>
                <CouponSwiper CouponList={CouponData}/>
            </div>

            <div className={styles.hotel_search}>
                <React.UI.Input value={search} onChange={(value:string) => OnSearch(value)} clearable placeholder="请输入关键词搜索" />
            </div>

            <div className={styles.hotellist}>
                {/* 下拉刷新 */}
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    {list.map((item:room) =>
                    {
                        return (
                            <div className={styles.item} key={item.id}>
                                <NavLink to={`/room/info?roomid=${item.id}`}>
                                    <div className={styles.images}>
                                        <div className={styles.swipers}>
                                            <img src={item.thumb_text} alt="" />
                                        </div>
                                        <div className={styles.title}>{item.name}</div>
                                    </div>
                                    <div>
                                        <div className={styles.item_top}>
                                            {item.flag && item.flag_text.map((val:string,index:number) =>
                                            {
                                                return (
                                                    <span key={index}>{val}</span>
                                                )
                                            })}
                                        </div>
                                        <div className={styles.item_bot}>
                                            <div className={styles.font}>
                                                <span className={styles.price}>￥60.00/晚</span>
                                            </div>
                                        </div>
                                    </div>
                                </NavLink>
                            </div>
                        )
                    })}
                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll loadMore={OnLoadMore} hasMore={HasMore} threshold={0} />
                </React.UI.PullToRefresh>
            </div>

            {/* 底部 */}
            <div className={styles.footer}>
                <Tabbar />
            </div>
        </>
    )
}


const CouponSwiper = memo(function CouponSwiper({CouponList}:{CouponList:coupon[]})
{
    if(CouponList.length > 0)
    {
        return (
            <>
                <React.UI.Swiper loop autoplay>
                    {CouponList.map((item:coupon) =>
                    {
                        return (
                            <React.UI.Swiper.Item key={item.id}>
                                <NavLink to={`/coupon/info?cid=${item.id}`} >
                                    <React.UI.Image src={item.thumb_text} height={213} fit='cover' />
                                </NavLink>
                            </React.UI.Swiper.Item>
                        )
                    })}
                </React.UI.Swiper>
            </>
        )
    }
})